<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <link href="../Teachercentre/favicon.ico" rel="shortcut icon">
    <title>账户设置</title>
    <link rel="stylesheet" href="setuserinfo.css">
    <script src="setuserinfo.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="aftertips">
        <div><span>=</span>成功</div>
    </div>
    <div class="wrap">
        <div class="wrap-content">
            <div class="wrap-content-left">
                <div class="logo"><img src="img/logo.png" alt="" width="40px" height="40px"></div>
                <div class="title-1">拉勾教育</div>
                <div class="title-2">互联网人实战大学</div>
            </div>
            <!-- 导航栏分项 -->
            <div class="wrap-content-right">
                <ul class="tab-list">
                    <li class="sec"> <a href="../Homepage/index1.html">选课</a></li>
                    <li class="sec" id="teachercentre" style="display: none;"> <a href="../Teachercentre/teachercentre.html">教师中心</a></li>
                    <li class="sec"> <a href="../Studyspace/studyspace.html">学习</a></li>
                    <li class="sec"><a href="../Questioncentre/questioncentre.html">师生问答</a></li>
                </ul>
                <!-- 登陆/注册 -->
                <div class="login">
                    <div class="dropdown">
                        <div class="dropdown-icon"></div>
                        <button class="dropbtn" id="userinfo"></button>
                        <div class="dropdown-content">
                            <a href="#">帮助与反馈</a>
                            <a href="setuserinfo.html" id="setuser">账户设置及充值</a>
                            <a href="../Homepage/index1.html" id="out-login">退出登录</a>
                        </div>
                    </div>
                    <!-- <div class="pic" id="loginbtn3"><img src="img/register.png" alt=""><span class="rolelogo">游客</span></div> -->
                    <div class="pic" id="rlogo"><img src="img/register.png" alt=""><span class="rolelogo" id="rolelogo"></span></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 账户设置板块 -->
    <div class="pagesetting">
        <div class="maincontainer">
            <div class="content">
                <div class="leftcontent">
                    <div class="tab">
                        <button class="tablinks" onclick="openItem(event, 'label-one')" id="defaultOpen">基本设置</button>
                        <button class="tablinks" onclick="openItem(event, 'label-two')">账号绑定</button>
                        <button class="tablinks" onclick="openItem(event, 'label-three')">修改密码</button>
                        <button class="tablinks" onclick="openItem(event, 'chargemoney')">充值积分</button>
                    </div>
                </div>
                <div class="rightcontent">
                    <div class="tabcontent" id="label-one">
                        <div class="head-pic">头像</div>
                        <div class="pic-wrap">
                            <img src="https://s0.lgstatic.com/images/myresume/default_headpic.png" alt="">
                        </div>
                        <div class="uploadbtn">
                            <input type="file" id="avatarupload">
                            <div class="change-text">更换头像</div>
                        </div>
                        <div class="userpic"></div>
                        <div class="nickname">昵称</div>
                        <div class="input-wrap">
                            <input type="text" class="nickinput" placeholder="请输入你的昵称" maxlength="15">
                            <div class="clear"></div>
                        </div>
                        <p id="changeresult"></p>
                        <button class="update-info">更新信息</button>
                    </div>
                    <div class="tabcontent" id="label-two">
                        <div id="wechatlogo"></div>
                        <div class="main-title">
                            <div class="title-left">
                                绑定微信
                            </div>
                            <div class="title-right">
                                <a href="">解除绑定></a>
                            </div>
                        </div>
                        <div class="sub-title">
                            当前已经绑定微信账号
                        </div>
                    </div>
                    <div class="tabcontent" id="label-three">
                        <div class="title-pass">修改密码</div>
                        <div class="input-content">
                            <div class="label-title">
                                当前密码
                            </div>
                            <input type="password" class="password-input" maxlength="16" id="oldpass" placeholder="请输入6-16位密码，字母区分大小写">
                        </div>
                        <div class="input-content">
                            <div class="label-title">
                                新密码
                            </div>
                            <input type="password" class="password-input" maxlength="16" id="newpass" placeholder="请输入6-16位密码，字母区分大小写">
                        </div>
                        <div class="input-content">
                            <div class="label-title">
                                确认密码
                            </div>
                            <input type="password" class="password-input" maxlength="16" id="repeatpass" placeholder="请输入6-16位密码，字母区分大小写">
                        </div>
                        <p id="errortip"></p>
                        <div class="footerbtn">
                            <div class="confirmbtn">确认</div>
                            <div class="cancelbtn">取消</div>
                        </div>
                    </div>
                    <div class="tabcontent" id="chargemoney">
                        <div class="title">
                            积分充值
                        </div>
                        <div class="group"></div>
                        <div class="contact">
                            <div class="inputmoney">
                                <input type="text" class="money" id="money" placeholder="请输入充值的金额">
                            </div>
                            <div class="tips">Tip： &nbsp&nbsp 您可以输入不大于200的金额，用数字填写</div>
                            <p class="restmoney" id="restmoney">余额为：</p>
                            <p id="chargeresult"></p>
                            <div class="footerbtn">
                                <div class="chargebtn">确认充值</div>
                                <div class="cancelsbtn">取消充值</div>
                                <div class="checkbtn">查询余额</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部内容 -->
    <div class="footer">
        <div class="footer-content">
            <div class="words-left">
                <p class="words-left-one">拉勾教育</p>
                <p class="words-left-two">拉勾旗下专为互联网人打造的实战大学</p>
            </div>
            <div class="words-right">
                <div class="words-right-one">
                    <!-- 二维码 -->
                    <div class="words-right-pic">
                        <img src="https://www.lgstatic.com/kw-web-fed/img/common-qrcode.abff25a.jpeg" alt="">
                    </div>
                    <!-- 文字 -->
                    <div class="words-right-title">
                        <p class="words-right-title-one">
                            关注公众号
                        </p>
                        <p class="words-right-title-two">
                            接收第一手优惠信息
                        </p>

                    </div>
                </div>
                <div class="words-right-two">
                    <!-- 二维码 -->
                    <div class="words-right-pic">
                        <img src="img/footer-logo.png" alt="">
                    </div>
                    <!-- 文字 -->
                    <div class="words-right-title">
                        <p class="words-right-title-one">
                            下载APP
                        </p>
                        <p class="words-right-title-two">
                            随时随地学习
                        </p>

                    </div>

                </div>
            </div>

        </div>
        <div class="footer-right">
            ©2021 拉勾网
            <a href="https://beian.miit.gov.cn" target="_blank">京ICP备14023790号-2</a>
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802024043" target="blank">京公网安备 11010802024043</a>
        </div>
    </div>
    <script>
        //选项卡tab切换
        function openItem(evt, itemName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(itemName).style.display = "block";
            evt.currentTarget.className += " active";
        }

        // 触发 id="defaultOpen" click 事件
        document.getElementById("defaultOpen").click();
    </script>
</body>

</html>